<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./首页外部样式.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>

<body>
    <div class="BigBox">

        <!-- 天猫超市部分 -->
        <div class="box">
            <!-- 天猫超市标题图 -->
            <img id="default" src="./img/TMCH.webp" alt="">
            <!-- 所有商品大盒子box_1 -->
            <div class="box_1">

            </div>
        </div>


        <!-- 天猫国际部分 -->
        <div class="box2">
            <!-- 标题图 -->
            <img id="default"
                src="https://gw.alicdn.com/imgextra/i1/O1CN01DWQY2W1U1LqMYx8RJ_!!6000000002457-2-tps-214-68.png_110x10000.jpg_.webp"
                alt="">
            <div class="box2_1">
                <!-- 左边两个大图部分 -->
                <div class="left">
                    <div class="image1">
                        <div class="text">
                            <div class="text_left">
                                抢先付定
                            </div>
                            <div class="text_right">
                                不只省百
                                <span>爆款超</span>
                            </div>
                        </div>
                    </div>
                    <div class="image2">
                        <div class="text">
                            <div class="text_left">
                                国际自营
                            </div>
                            <div class="text_right">
                                低价享不
                                <span>爆款直</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">

                </div>
            </div>
        </div>

        <!-- 猜你喜欢部分 -->
        <div class="box3">
            <div class="title">
                <strong>猜你喜欢</strong><span>个性推荐</span>
            </div>
            <div class="content">

            </div>
        </div>
    </div>
</body>
<script>
    $.get("http://localhost:3000/getAll", function (data) {
        console.log(data.imgmarket);
        let arr = data.imgmarket.map((item, index) => {
            console.log(item);
            let count = 0;
            return `
            <div class="item">
                <div class="img">
                    <a href="./详情页部分.html" style="targe:_self;"><img src="${item[count++]}" alt=""><a>
                </div>
                <div class="text">
                    <span>${item[count++]}</span>
                    <strong>${item[count]}</strong>
                </div>
            </div>`
        })
        $('.box .box_1').html(arr)


        let arr2 = data.imgInternational.map((item, index) => {
            // console.log(item);
            let count = 0
            return `
                <div class="item">
                    <div class="img">
                        <img src="${item[count++]}" alt="">
                    </div>
                    <div class="text">
                        <span>${item[count++]}</span>
                        <strong>${item[count]}</strong>
                    </div>
                </div>
            `})
        $('.box2 .box2_1 .right').html(arr2)


        let arr3 = data.like.map((item, index) => {
            let count = 0
            return `
                <div class="item">
                    <div class="img">
                        <img src="${item[count++]}" alt="">
                    </div>
                    <div class="text">
                        <p>${item[count++]}</p>
                        <i>${item[count]}</i>
                    </div>
                </div>
        ` })
        $('.box3 .content').html(arr3)
    })
</script>

</html>